<!DOCTYPE html>
  <html>
  <head>
      <meta charset="utf-8">
      <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
      <title>title</title>
      <link rel="stylesheet" type="text/css" href="../css/api.css"/>
      <style>
      body{
          padding-top: 1.5rem;
      }
      .header{
            width: 94%;
            height: 2.5rem;
            line-height: 2.5rem;
            padding: 0.5rem 0.8rem;
            text-align: center;
            position: fixed;
            top:1.5rem;
            background-color: #fff;
        }
        .header_img{
          width: 6%;
          height: 45%;
          float: left;
          margin-top: 0.5rem;
        }
      .header_img img{
        width: 100%;
        height: 100%;
      }
      .header h3{
        line-height: 3rem;
        width: 90%;
        text-align: center;
      }
      .inp{
        width: 80%;
        margin: 3rem auto;
        margin-top:45%;
      }
      .inp input{
        outline: none;
        width: 100%;
        height:3rem;
        color: black;
        line-height: 3rem;
        font-size: 1.1rem;
        border-bottom: 1px solid #ccc;
      }
      .log{
        width: 100%;
        height: 3rem;
        background-color: #40cccc;
        color: #fff;
        line-height: 3rem;
        text-align: center;
        margin-top: 3rem;
        font-size: 1rem;
        border-radius: 2rem;
        letter-spacing:0.1rem;
      }
      .logs {
        position: relative;
        width: 35%;
        height: 2.5rem;
        background-color: #40cccc;
        color: #fff;
        top: -2.8rem;
        line-height: 2.5rem;
        text-align: center;
        font-size: 1rem;
        border-radius: 0.5rem;
    }
      .p{
        width: 100%;
        /*height: 1rem;*/
        text-align: center;
        line-height: 0.2rem;
        margin-top: 1rem;
        font-size: 0.8rem;
        color: #ccc;
      }
      .footer{
        width: 80%;
        position: fixed;
        bottom:1rem;
        left: 10%;
        border-top:1px solid #ccc;
      }
      .fl{
      float: left;
      }
      .fr{
        float: right;
      }
      .footer_img{
        width: 80%;
        margin: 1rem auto;
        display: flex;
        justify-content: space-between;
      }
      .img{
        width: 20%;
        height: 10%;
      }
      .img img{
        width: 100%;
        height: 100%;
      }
      .yzm{
        width: 65%;
      }
      .p1{
        position: absolute;
        top:-0.5rem;
        padding: 0rem 0.8rem;
        left: 37%;
        height: 1rem;
        text-align: center;
        line-height: 1rem;
        background-color: #fff;
      }
      </style>
  </head>
  <body>
    <div class="header">
      <div class="header_img">
        <img src="../image/u18.png" alt="" onclick="closewin('shop')">
      </div>
      <h3>找回密码</h3>
    </div>
    <div class="inp">
      <input type="text" name="" placeholder="手机号" id="phone">
      <input type="text fl" name="" placeholder="验证码" id="code" class="yzm">
      <div class="logs fr" onclick="aa()" id="sendcodes">发送验证码</div>
      <input type="password" name="" placeholder="新密码" id="pwd">
      <input type="password" name="" placeholder="确认密码" id="pwd1">

      <div class="log" onclick="register()">立即找回</div>
      <!-- <p class="p">不用担心，我们不会公开您的手机号,</p> -->
      <!-- <p class="p"><span style="color:#40cccc;"> 《服务协议》</span></p> -->
    </div>

  </body>
  <script type="text/javascript" src="../script/api.js"></script>
  <script type="text/javascript" src="../script/jquery-1.8.3.js"></script>
  <script type="text/javascript" src="../script/common.js"></script>
  <script type="text/javascript">
  var oHeight = $(document).height(); //屏幕当前的高度

        $(window).resize(function(){

                if($(document).height() < oHeight){

                $(".footer").css("display","none");

            }else{

                $(".footer").css("display","block");

            }

            });

      var sendcode = 0
      apiready = function(){

      };


      function register() {
        var pwd = document.getElementById('pwd').value
        var pwd1 = document.getElementById('pwd1').value
        if(pwd!=pwd1){
          msgcode('两次密码不同')
          return false;
        }
        var phone = document.getElementById('phone').value;
        if(!(/^1[3456789]\d{9}$/.test(phone))){
            msgcode("手机号码有误，请重填");
            return false;
        }

        var code = document.getElementById('code').value;
        if(code!=sendcode){
          msgcode('验证码错误')
          return false;
        }
        api.ajax({
            url: SITE_URL+'user_api/register/get_pass',
            method: 'post',
            data: {
                values: {
                    phone: phone,
                    pwd:pwd
                }
            }
        },function(ret, err){
            if (ret) {
              if(ret.error==200){
                msgcode('恭喜您找回成功')
                setTimeout(function () {
                  api.closeWin({

                  });
                },1500)



              }else{
                msgcode('稍后再试')
              }
              //  alert( JSON.stringify( ret ) );
            } else {
              msgcode('请检查网络连接')
                //alert( JSON.stringify( err ) );
            }
        });



      }





      function aa() {
        var phone = document.getElementById('phone').value;
        if(!(/^1[3456789]\d{9}$/.test(phone))){
            msgcode("手机号码有误，请重填");
            return false;
        }
        api.ajax({
            url: SITE_URL+'user_api/sendcode/pass_code',
            method: 'post',
            data: {
                values: {
                    phone: phone
                }
            }
        },function(ret, err){
            if (ret) {
              if(ret.error==200){
                sendcode = ret.data
              //  alert(sendcode)
                msgcode('验证码已发送')
                $("#sendcodes").removeAttr("onclick");
                end_codes()
                // setTimeout(function(){
                //   sendcode = '10022'
                // },60000);
              }else if(ret.error==250){
                login_at()
              }else{
                msgcode('稍后再试')
              }
              //  alert( JSON.stringify( ret ) );
            } else {
              msgcode('请检查网络连接')
                //alert( JSON.stringify( err ) );
            }
        });
      }
      var times = 60
      function end_codes() {
        // alert(times)
        $("#sendcodes").html(times)
        $("#sendcodes").css('background-color','#CDC5BF')
        // document.getElementById('sendcodes').innerHTML=times


        times -=1
        if(times>0){
          setTimeout(function () {
            end_codes()
          },1000)
        }else{
          times = 60
          $("#sendcodes").attr("onclick","aa();");
          $("#sendcodes").html('重新发送')
          $("#sendcodes").css('background-color','#40cccc')

        }

      }

      function login_at() {
          api.confirm({
              title: '该手机号并未注册,是否跳转到注册',
              buttons: ['确定', '取消']
          }, function(ret, err) {
              if (ret.buttonIndex == 1) {
                  openwin('zc')

              }
          });

      }
  </script>
  </html>
